<template>
	<NavBar :obj="{ title: '退款/售后', color: '#000', backgroundColor: '#fff' }" />

	<view class="fill">
		<view class="show-load" v-if="showLoad" style="padding: 30upx">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>

		<view class="item" v-for="(item, index) in list" :key="index">
			<view class="sn flex items-center justify-between">
				<view class="order-no">退款编号：{{ item.sn }}</view>
				<view class="status">{{ item.type == 1 ? '退款' : '退款退货' }}</view>
			</view>
			<block v-if="item.product.length == 1">
				<view class="middle flex justify-between" v-for="(item2, index2) in item.product" :key="index2" >
					<image :src="item2.icon" class="icon"></image>
					<view class="titles flex-1">
						<view class="t">{{ item2.title }}</view>
						<view class="spec">{{ item2.spec }}</view>
					</view>
					<view class="total flex flex-col items-center justify-center">
						<view class="val rmb-black">{{ item2.vip_price }}</view>
						<view class="num">共{{ item2.num }}件</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="middle flex justify-between" @click="goUrl('/pages/order/details?id=' + item.id)">
					<view class="flex flex-1 all-icon">
						<block v-for="(item2, index2) in item.product" :key="index2">
							<image :src="item2.icon" class="icon" v-if="index2 < 3"></image>
						</block>
					</view>

					<view class="total flex flex-col items-center justify-center">
						<view class="val flex items-center">
							<view class="tips">退款</view>
							<view class="rmb-black">{{ item.total }}</view>
						</view>
						<view class="num">共{{ item.product.length }}件</view>
					</view>
				</view>
			</block>

			<view class="return-status flex items-center">
				<view class="value">{{item.status_text}}</view>
				<view class="friendly">{{item.status_desc}}</view>
			</view>

			<view class="bottom flex items-center justify-end">
				<view class="btn border-btn gray-btn" @click="goUrl('/pages/refund/my-refund-info?id=' + item.id)">查看详情</view>
			
				<view class="btn border-btn error-btn" v-if="item.status == 2" @click="goUrl('/pages/refund/up-express?id=' + item.id)">上传物流</view>
			
			</view>
		</view>

		<view class="empty" style="padding-bottom: 20%" v-if="!list.length && !showLoad">
			<up-empty icon="/static/product/ic_zerodata@2x.png" iconSize="392upx" marginTop="50%" text="暂无订单" />
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, nextTick, inject } from 'vue';
	import { port, goUrl, hint, loading, closeLoading } from '../../service/port';
	import { onShow, onReachBottom } from '@dcloudio/uni-app';
	const showLoad = ref(true);
	const list = ref([]);
	const page = ref(1);
	const status = ref('');
	onShow(() => {
		page.value = 1;
		list.value.length = 0;
		getMyRefundOrder();
	});

	async function getMyRefundOrder() {
		let res = await port('getMyRefundOrder', { page: page.value });
		showLoad.value = false;
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			page.value++;
		}
	}
	onReachBottom(() => {
		getMyRefundOrder();
	});
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	.return-status {
		padding: 17rpx 35rpx;
		background: #f4f5f8;
		border-radius: 16rpx;
		.value {
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
		}
		.friendly {
			font-weight: 400;
			font-size: 26rpx;
			color: #010101;
			margin-left: 15rpx;
		}
	}

	.all-icon {
		gap: 10upx;
	}

	.bottom {
		gap: 16upx;
		margin-top: 28upx;

		.btn {
			width: 160upx;
			padding: 12rpx 0;
			text-align: center;
			border-radius: 16upx;
		}
		.border-btn {
			font-weight: 400;
			font-size: 26upx;
			padding: 10rpx 0;
		}
		.gray-btn {
			color: #666;
			border: 1upx solid #cccccc;
		}
		.error-btn {
			color: #fb3204;
			border: 1px solid #fb3204;
		}
		.fill-btn {
			font-size: 26upx;
			color: #ffffff;
			background: linear-gradient(-90deg, #fb3204 0%, #fe7800 100%);
		}
		.expert {
			color: #fb3204;
			background: #ffe3dd;
			border: none;
			padding: 10rpx 0;
		}
	}

	.fill {
		position: relative;
		padding-bottom: 120upx;
		.item {
			margin: 24upx 30upx;
			padding: 28upx;
			background: #ffffff;
			border-radius: 20upx;
			.sn {
				.order-no {
					font-weight: 400;
					font-size: 24upx;
					color: #999999;
				}
				.status {
					font-weight: 400;
					font-size: 28upx;
					color: #fb3204;
				}
			}
			.middle {
				padding: 26upx 0;
				.icon {
					width: 156upx;
					height: 156upx;
					border-radius: 20upx;
				}

				.titles {
					margin: 0 40upx 0 16upx;
					.t {
						font-weight: 400;
						font-size: 26upx;
						color: #000000;
						margin-bottom: 23upx;
					}
					.spec {
						font-weight: 400;
						font-size: 22upx;
						color: #999999;
					}
				}
				.total {
					.val {
						font-weight: 500;
						font-size: 30upx;
						color: #000000;
					}
					.tips {
						font-weight: 400;
						font-size: 22upx;
					}
					.num {
						font-weight: 400;
						font-size: 24upx;
						color: #333333;
						margin-top: 10upx;
						margin-left: 15px;
					}
				}
			}
		}
	}
</style>
